/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import React, {useState, useEffect} from 'react';
import {View, Text, TouchableOpacity, StyleSheet, Dimensions} from 'react-native';
import {
  NavigationSplitContainer,
  NavigationMode,
  NavBarPosition,
} from '@hadss/react_native_adaptive_layout';
import AvoidContainer from '../../components/AvoidContainer/AvoidContainer';

const myButton = (props, pageNum: number, title: string): JSX.Element => (
  <TouchableOpacity 
      style={styles.button}
      onPress={(): void => {
        props.navigateTo(pageNum);
      }}
    >
      <Text>{title}</Text>
  </TouchableOpacity>
);
const backButton = (props): JSX.Element => (
  <TouchableOpacity
    style={styles.button}
    onPress={(): void => {
      props.onBack();
    }}
  >
    <Text >Back</Text>
  </TouchableOpacity>
);
const HomeScreen = (props): JSX.Element => (
  <View style={styles.container}>
    <Text style={styles.text}>Home</Text>
  </View>
);
const AScreen = (props): JSX.Element => (
  <View style={styles.container}
    onLayout={(): void => {
      if (isLandscape) {
        props.onBack();
      }
    }}>
    <Text style={styles.text}>A</Text>
    <View style={styles.buttonLayout}>
      {myButton(props, 0, 'Home')}
      {myButton(props, 2, 'To B')}
    </View>
    <View style={styles.buttonLayout}>
      {myButton(props, 3, 'To D')}
      {backButton(props)}
    </View>

  </View>
);
const BScreen = (props): JSX.Element => (
  <View style={styles.container}
    onLayout={(): void => {
      if (isLandscape) {
        props.onBack();
      }
    }}>
    <Text style={styles.text}>B</Text>
    <View style={styles.buttonLayout}>
      {myButton(props, 0, 'Home')}
      {myButton(props, 1, 'To A')}
    </View>
    <View style={styles.buttonLayout}>
      {myButton(props, 3, 'To D')}
      {backButton(props)}
    </View>
  </View>
);
const CScreen = (): JSX.Element => (
  <View style={styles.container}>
    <Text style={styles.text}>C</Text>
  </View>
);
const DScreen = (props): JSX.Element => (
  <View style={styles.container}
    onLayout={(): void => {
      if (isLandscape) {
        props.onBack();
      }
    }}>
    <Text style={styles.text}>D</Text>
    <View style={styles.buttonLayout}>
      {myButton(props, 0, 'Home')}
      {myButton(props, 1, 'To A')}
    </View>
    <View style={styles.buttonLayout}>
      {myButton(props, 2, 'To B')}
      {backButton(props)}
    </View>
  </View>
);

let isLandscape: boolean = false;
// 主组件
const NavigationSplitDemo = () : JSX.Element => {
  const [width, setWidth] = useState(Dimensions.get('window').width);

  useEffect(() => {
    // 监听屏幕尺寸变化
    const subscription = Dimensions.addEventListener('change', (change) => {
      setWidth(change.window.width);
      isLandscape = change.window.width > 400;
    });
    // 组件卸载时移除事件监听
    return (): void => {
      subscription.remove();
    };
  }, []);

  return (
    <AvoidContainer>
      <NavigationSplitContainer
        mode={width > 400 ? NavigationMode.Split : NavigationMode.Stack}
        navBarPosition={NavBarPosition.Start}
        navBarWidth={width * 0.4}
        navBarWidthRange={[width * 0.4, width * 0.5]}
        navBarStyle={{
          backgroundColor: '#b4e0e7ff',
          paddingTop: 10,
        }}
        navBarItemStyle={{
          alignItems: 'center',
          marginHorizontal: 5,
          paddingVertical: 20,
        }}
      >
        <NavigationSplitContainer.Screen 
          name="Home" 
          component={HomeScreen} 
          />
        <NavigationSplitContainer.Screen
          name="ToA"
          component={AScreen}
        />
        <NavigationSplitContainer.Screen
          name="ToB"
          component={BScreen}
        />
        <NavigationSplitContainer.Screen
          name="ToD"
          component={DScreen}
        />
      </NavigationSplitContainer>
    </AvoidContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#d8c411ff',
    width: '100%',
    height: '100%',
  },
  text: {
    fontSize: 24,
    marginBottom: 40,
  },
  button: {
    width: '48%',
    aspectRatio: 3,
    backgroundColor: '#fff',
    borderRadius: 5,
    marginBottom: 8,
    justifyContent: 'center',
    alignItems: 'center'
  },
  buttonLayout: {
    flexDirection: 'row', 
    justifyContent: 'space-around',
    width: '100%'
  },
});

export default NavigationSplitDemo;